.wrapper {
  width: auto;
  min-width: 172px;
  background: var(--node-background);
  border: 1px solid var(--overlay-20);
  border-radius: var(--border-radius-md);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition:
    border-color 300ms var(--default-timing-function),
    border-width 300ms var(--default-timing-function);
}

:global([data-loading='true']) .wrapper {
  opacity: 0;
}

.wrapperHighlighted,
.wrapper:hover {
  border: 1px solid var(--primary-accent);
  box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);
}

.wrapperActive,
.wrapperActive:hover {
  border: 2px solid var(--primary-accent);
  box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);
}
